<template>
  <!-- 金融诉求详情页 -->
  <div class="layout">
    <ContainerTitle text="金融诉求详情页"></ContainerTitle>
    <el-form
      class="formDiv"
      ref="form"
      :model="detail"
      label-width="110px"
      style="text-align: left"
    >
      <div class="l-title">诉求基本信息</div>
      <el-form-item label="诉求名称：" :rules="[{ required: true }]">
        <el-input
          placeholder="请输入"
          v-model.trim="detail.title"
          :disabled="true"
          style="width: 360px"
        ></el-input>
      </el-form-item>
      <el-form-item label="联系人：" :rules="[{ required: true }]">
        <el-input
          placeholder="请输入"
          v-model.trim="detail.contacts"
          :disabled="true"
          style="width: 360px"
        ></el-input>
      </el-form-item>
      <el-form-item label="联系电话：" :rules="[{ required: true }]">
        <el-input
          placeholder="请输入"
          v-model.trim="detail.contactNumber"
          :disabled="true"
          style="width: 360px"
        ></el-input>
      </el-form-item>
      <el-form-item label="金融类型：" :rules="[{ required: true }]">
        <el-input
          placeholder="请输入"
          v-model.trim="$selectDict(type, detail.financeType).dictLabel"
          :disabled="true"
          style="width: 360px"
        >
        </el-input>
      </el-form-item>

      <div class="l-title">诉求原因</div>
      <el-form-item label="诉求原因：" :rules="[{ required: true }]">
        <el-input
          placeholder="请输入"
          type="textarea"
          resize="none"
          :maxlength="300"
          :autosize="{ minRows: 4, maxRows: 4 }"
          v-model.trim="detail.appealReason"
          :show-word-limit="true"
          :disabled="true"
        ></el-input>
      </el-form-item>
      <el-form-item label="诉求文件上传：" style="margin-bottom: 0px">
        <div v-for="(item,i) in FileData" :key="i">
          <span class="enclosure" @click="downLoad(item)">{{ item.fileName }}</span>
        </div>
      </el-form-item>
      <el-form-item label="发布时间：" style="margin-bottom: 0px">
        {{ detail.publishTime }}
      </el-form-item>
      <el-form-item label="审核时间：" style="margin-bottom: 0px">
        {{ detail.verifyTime }}
      </el-form-item>
      <el-form-item label="备注：" style="margin-bottom: 0px">
        {{ detail.remark }}
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { getAppealDetails, getFileData } from "@/common/api/company.js";
export default {
  data() {
    return {
      name: "finance",
      crumbs: [
        {
          label: "企业空间",
          value: "company",
        },
        {
          label: "金融服务",
          value: "",
        },
        {
          label: "我的金融诉求",
          value: "myFinanceProductAppeal",
        },
        {
          label: "金融诉求详情页",
          value: "myFinanceProductAppealDetail",
          choose: true,
        },
      ],
      detail: {},
      id: "",
      type: "",
      FileData: []
    };
  },
  mounted() {
    this.id = this.$route.query.id;
    this.getList();
    this.getDict();
  },
  methods: {
    async getList() {
      let res = await getAppealDetails(this.id);
      if (res.code == 200) {
        this.detail = res.data
        this.getFileData()
      }
    },
    // 获取文件数据
    async getFileData(){
      let res = await getFileData(this.detail.fileBatchId);
      if (res.code == 200) {
        this.FileData = res.rows
      }
    },
    // 下载
    downLoad(item) {
      window.location.href = item.filePath
    },
    // 字典
    async getDict() {
      // 调用公共方法中的查询字典表
      this.getDictList(this,`finance_appeal_type`).then(res => {
        this.appealList = res.finance_appeal_type;
      })
    },
    /**
     * 返回上一页
     */
    goBack: function () {
      this.$router.back();
    },
  },
};
</script>
<style scoped>
::v-deep .el-input.is-disabled .el-input__inner {
  color: #333333;
}
::v-deep .el-textarea.is-disabled .el-textarea__inner {
  color: #333333;
}
.breadcrumb {
  width: 1000px;
  margin: 20px 0;
}
.backBtn {
  border: 1px solid #eeeeee;
  white-space: nowrap;
  font-size: 12px;
  height: 30px;
  width: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  cursor: pointer;
}
.roomDiv {
  display: flex;
  justify-content: center;
}

.roomDiv .leftDiv {
  width: 200px;
  text-align: left;
}

.roomDiv .rightDiv {
  width: 800px;
  margin-left: 30px;
}
.l-title {
  font-weight: bold;
  font-size: 14px;
  color: #333;
  text-align: left;
  background: #f1f2f4;
  padding: 12px 20px;
  margin-bottom: 24px;
}
.titleDiv {
  border-bottom: 2px solid #045db9;
  text-align: left;
  padding: 10px;
  font-size: 20px;
  font-weight: bold;
  color: #045db9;
  margin-bottom: 20px;
}
.layout {
  min-height: 100vh;
  position: relative;
  padding-bottom: 150px;
  box-sizing: border-box;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}

.enclosure {
  color: #045db9;
  cursor: pointer;
}
</style>